<template>
  <view class="genealogy allColumnCenter">
    <!--  头部  -->
    <header-title ref="headerTitle" :title="`家谱`" :is-click="true" is-fixed
                  @getPageHeight="getPageHeight"
                  z-index="10">
    </header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <!--  背景  -->
    <view class="bag"></view>
    <scroll-view :scroll-y="true" class="genealogy_scroll" :style="{
      height: `calc(100vh - ${headerHeight}px)`
    }">
      <view class="genealogy_scroll_content allColumnCenter">
<!--        <view class="genealogy_banner mt-18 z-1"></view>-->
        <view class="genealogy_banner relative" v-if="imgUrls.length > 0">
          <swiper
              indicator-dots="true"
              autoplay
              circular
              :interval="3000"
              :duration="500"
              indicator-color="rgba(255,255,255,0.1)"
              indicator-active-color="#fff"
              class="w-full h-420 relative">
            <block v-for="(item,index) in imgUrls" :key="index">
              <swiper-item>
                <navigator :url="'/pages/extension/news_list/index'">
                  <image :src="item.image_input[0]" class="w-full h-420" mode="aspectFill" />
                </navigator>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <view class="genealogy_content mt-30 z-1 row justify-between">
          <view class="genealogy_content_left">
            <view class="genealogy_content_left_top" @click.stop="goToTheLastNamePage">
              <view class="genealogy_content_left_top_introduced mt-15 ml-20 mr-20 row items-center justify-between">
                <view class="genealogy_content_left_top_introduced_title">
                  <text class="genealogy_content_left_top_introduced_title_text">
                    中华姓氏
                  </text>
                </view>
                <u-icon name="arrow-right" size="24" color="#FFFFFF"></u-icon>
              </view>
              <view class="genealogy_content_left_top_surname row items-center justify-between ml-20 mr-20 mt-18 mb-10">
                <view class="genealogy_content_left_top_surname_list allRowCenter" v-for="(item, index) in surnameList"
                      :key="index">
                  <text class="genealogy_content_left_top_surname_list_text">{{ item }}</text>
                </view>
              </view>
            </view>
            <view class="genealogy_content_left_bottom  row items-center justify-between">
              <view class="genealogy_content_left_bottom_icon mt-36 ml-20 mb-36 allRowCenter">
                <image src="/static/shiqin-images/square.png" class="genealogy_content_left_bottom_icon_image"></image>
                <view class="genealogy_content_left_bottom_icon_label allRowCenter">
                  <text class="genealogy_content_left_bottom_icon_label_text">
                    张
                  </text>
                </view>
              </view>
              <view class="genealogy_content_left_bottom_Info ml-23 mr-20">
                <view class="genealogy_content_left_bottom_Info_title row items-center justify-between">
                  <text class="genealogy_content_left_bottom_Info_title_text ml-32">张姓起源</text>
                  <u-icon name="arrow-right" size="24" color="#FFFFFF"></u-icon>
                </view>
                <view class="genealogy_content_left_bottom_Info_describe mt-12 mr-24">
                  <text class="genealogy_content_left_bottom_Info_describe_text">迁徙分布 家风家训</text>
                </view>
              </view>
            </view>
          </view>
          <view class="genealogy_content_right column items-center justify-between">
            <view class="genealogy_content_right_top row items-center justify-between">
              <view class="genealogy_content_right_top_info ml-25">
                <view class="genealogy_content_right_top_info_title">
                  <text class="genealogy_content_right_top_info_title_text">
                    寻根拜祖
                  </text>
                </view>
                <view class="genealogy_content_right_top_info_content">
                  <text class="genealogy_content_right_top_info_content_text">
                    弘扬中华孝文化
                  </text>
                </view>
              </view>
              <u-icon name="red-packet-fill" size="64" color="#FFFFFF" class="mr-25"></u-icon>
            </view>
            <view class="genealogy_content_right_bottom row items-center justify-between">
              <u-icon name="red-packet-fill" size="64" color="#FFFFFF" class="ml-25"></u-icon>
              <view class="genealogy_content_right_bottom_info mr-25 column items-end">
                <view class="genealogy_content_right_bottom_info_title">
                  <text class="genealogy_content_right_bottom_info_title_text">
                    老黄历
                  </text>
                </view>
                <view class="genealogy_content_right_bottom_info_content">
                  <text class="genealogy_content_right_bottom_info_content_text">
                    黄道吉日 时辰宜忌
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="genealogy_tips">
          <text class="genealogy_tips_text">我的家谱</text>
        </view>
        <view class="genealogy_posters">
          <image class="genealogy_posters_image" src="/static/shiqin-images/first.png"></image>
          <view class="genealogy_posters_info column">
            <view class="genealogy_posters_info_name">
              <text class="genealogy_posters_info_name_text">周氏家谱</text>
            </view>
            <view class="genealogy_posters_info_createdBy">
              <text class="genealogy_posters_info_createdBy_text">创建人：张三</text>
            </view>
            <view class="genealogy_posters_info_time">
              <text class="genealogy_posters_info_time_text">2023年6月6日建</text>
            </view>
          </view>
        </view>
        <view class="genealogy_bottomBtn allRowCenter mt-30 mb-30">
          <text class="genealogy_bottomBtn_text">新建家谱</text>
        </view>
        <view :style="{
          height: `${remainingHeight}px`
        }">

        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {getArticleBannerList} from "../../api/api";

export default {
  components: {HeaderTitle},
  // #ifdef MP
  config: {
    disableScroll: true
  },
  // #endif
  data() {
    return {
      surnameList: ['王', '李', '张', '刘'],
      headerHeight: 0,
      systemInfo: {},
      remainingHeight: 0,
      imgUrls: [],
    };
  },
  onShow() {
    this.getArticleBanner()
  },
  onReady() {
    this.getArticleBanner()
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()

      this.systemInfo = uni.getSystemInfoSync()

      const query = uni.createSelectorQuery().in(this)
      query.select('.genealogy_scroll_content').boundingClientRect((data) => {
        console.log(this.systemInfo.windowHeight - this.headerHeight, data.height)
        const rpx = this.systemInfo.windowWidth / 750
        if (this.systemInfo.windowHeight - this.headerHeight + (50 * rpx) < data.height) {
          return
        }
        this.remainingHeight = this.systemInfo.windowHeight - this.headerHeight - data.height + 100 * rpx
      }).exec();
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    // 跳转姓氏页面
    goToTheLastNamePage() {
      this.$nav.navigateTo('/pages/genealogyPage/index')
    },
    getArticleBanner: function() {
      let that = this;
      getArticleBannerList().then(res => {
        that.imgUrls = res.data;
      });
    },
  },
}
</script>

<style lang="scss">
.genealogy {
  width: 750rpx;
  min-height: 100vh;
  position: relative;

  .bag {
    width: 750rpx;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: url("https://sq-crms.oss-cn-beijing.aliyuncs.com/UNI_APP/banner_background.png") no-repeat;
    background-size: 750rpx 100vh;
  }

  .genealogy_scroll {
    width: 750rpx;

    .genealogy_scroll_content {
      width: 750rpx;
      position: relative;

      .genealogy_banner {
        width: 702rpx;
        height: 360rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
      }

      .genealogy_content {
        width: 702rpx;

        .genealogy_content_left {
          width: 336rpx;
          background: rgb(253, 65, 8);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          overflow: hidden;

          .genealogy_content_left_top {
            .genealogy_content_left_top_introduced {
              .genealogy_content_left_top_introduced_title {
                .genealogy_content_left_top_introduced_title_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 36rpx;
                  color: #FFFFFF;
                }
              }
            }

            .genealogy_content_left_top_surname {
              .genealogy_content_left_top_surname_list {
                width: 68rpx;
                height: 68rpx;
                background: #FFBA00;
                border-radius: 12rpx 12rpx 12rpx 12rpx;

                .genealogy_content_left_top_surname_list_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #000000;
                }
              }
            }
          }

          .genealogy_content_left_bottom {
            background: rgb(253, 125, 86);
            overflow: hidden;

            .genealogy_content_left_bottom_icon {
              position: relative;

              .genealogy_content_left_bottom_icon_image {
                width: 72rpx;
                height: 72rpx;
                margin-top: -10rpx;
              }

              .genealogy_content_left_bottom_icon_label {
                width: 54rpx;
                height: 54rpx;
                background: #FF3900;
                border-radius: 12rpx;
                position: absolute;
                left: 24rpx;
                top: -12rpx;

                .genealogy_content_left_bottom_icon_label_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #FFFFFF;
                }
              }
            }

            .genealogy_content_left_bottom_Info {
              .genealogy_content_left_bottom_Info_title {
                .genealogy_content_left_bottom_Info_title_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 36rpx;
                  color: #FFFFFF;
                }
              }

              .genealogy_content_left_bottom_Info_describe {
                .genealogy_content_left_bottom_Info_describe_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 22rpx;
                  color: #FFFFFF;
                }
              }
            }
          }
        }

        .genealogy_content_right {
          .genealogy_content_right_top {
            width: 336rpx;
            height: 134rpx;
            background: #FF4208;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .genealogy_content_right_top_info {
              .genealogy_content_right_top_info_title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 36rpx;
                color: #FFFFFF;
              }

              .genealogy_content_right_top_info_content {
                .genealogy_content_right_top_info_content_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 22rpx;
                  color: #FFFFFF;
                }
              }
            }
          }

          .genealogy_content_right_bottom {
            width: 336rpx;
            height: 134rpx;
            background: #FF4208;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .genealogy_content_right_bottom_info {
              .genealogy_content_right_bottom_info_title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 36rpx;
                color: #FFFFFF;
              }

              .genealogy_content_right_bottom_info_content {
                .genealogy_content_right_bottom_info_content_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 22rpx;
                  color: #FFFFFF;
                }
              }
            }
          }
        }
      }

      .genealogy_tips {
        width: 702rpx;
        padding: 33rpx 0 23rpx 0;

        .genealogy_tips_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #292929;
        }
      }

      .genealogy_posters {
        width: 702rpx;
        height: 182rpx;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        position: relative;

        .genealogy_posters_image {
          width: 702rpx;
          height: 182rpx;
          position: absolute;
          top: 0;
          left: 0;
        }

        .genealogy_posters_info {
          position: absolute;
          right: 194rpx;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;

          .genealogy_posters_info_name {
            .genealogy_posters_info_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #FFFFFF;
            }
          }

          .genealogy_posters_info_createdBy {
            .genealogy_posters_info_createdBy_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #FFFFFF;
            }
          }

          .genealogy_posters_info_time {
            .genealogy_posters_info_time_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #FFFFFF;
            }
          }
        }
      }

      .genealogy_bottomBtn {
        width: 362rpx;
        height: 80rpx;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        border: 2rpx solid #FF4206;

        .genealogy_bottomBtn_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FF4206;
        }
      }
    }
  }


}
</style>
